<template>
  <div class='home'>
    <!-- 头部搜索 -->
    <div class='searchBar'>
      <i class='iconfont icon-icon105'></i>
      <input type="text" placeholder="请输入设备名称查询" class="fl" v-model="search">
      <mt-button size="small" type="primary" class="fl"  style="height:28px" @click="getData">搜索</mt-button>
      <i class='iconfont icon-cha' @click='getData'></i>
    </div>
    <!-- 内容展示部分 -->
      <!-- 按钮 -->
     <div class="nav">
      <!-- <mt-button size="small" @click.native.prevent="active = 'tab-container1'">tab 1</mt-button>
      <mt-button size="small" @click.native.prevent="active = 'tab-container2'">tab 2</mt-button>
      <mt-button size="small" @click.native.prevent="active = 'tab-container3'">tab 3</mt-button> -->
       <mt-navbar v-model="status">
        <mt-tab-item id="01" @click.native.prevent="getData">所有事件</mt-tab-item>
        <mt-tab-item id="02" @click.native.prevent="getData">告警事件</mt-tab-item>
        <mt-tab-item id="03" @click.native.prevent="getData">非告警事件</mt-tab-item>
      </mt-navbar>
    </div>

    <div class="page-tab-container">
      <mt-tab-container class="page-tabbar-tab-container" v-model="active">
        <mt-tab-container-item id="tab-container1">
        	<!-- cell组件 -->
          <mt-cell v-for="(item,index) in list" :key="index" v-if="item.type=='02'||'01'||'03'">
            <div :class="['thead','status'+item.type]">
              <span>{{item.statement}}</span>
            </div>
          </mt-cell>
        </mt-tab-container-item>
        <mt-tab-container-item id="tab-container2">
        	<!-- cell组件 -->
          <mt-cell v-for="(item,index) in list" :key="index" v-if="item.type=='02'||'01'">
            <div :class="['thead','status'+item.type]">
              <span>{{item.statement}}</span>
            </div>
          </mt-cell>
        </mt-tab-container-item>
        <mt-tab-container-item id="tab-container3">
        	<!-- cell组件 -->
          <mt-cell v-for="(item,index) in list" :key="index" v-if="item.type=='03'">
              <div :class="['thead','status'+item.type]">
              <span>{{item.statement}}</span>
            </div>
          </mt-cell>
        </mt-tab-container-item>
      </mt-tab-container>
    </div>
    <!-- 底部导航 -->
    <Tabbar></Tabbar>
  </div>
</template>
<script>
import { eventRecord } from "../api/index.js";
import Tabbar from "@/components/Tabbar";
export default {
  data() {
    return {
      active: "tab-container1",
      id: 0,
      userid: 1,
      search: "",
      status: "01",
      curPageNo: 1,
      list: []
    };
  },
  components: {
    Tabbar
  },
  methods: {
    clickme() {
      this.initTime = new Date().getTime();
    },
    tab(index) {
      this.num = index;
      this.getData();
    },
    getData() {
      let params = {
        userid: localStorage.getItem("userid"),
        status: this.status,
        curPageNo: this.curPageNo,
        search: this.search
      };
      eventRecord({ params: params }).then(res => {
        // console.log(111);
        if (res.code == 1) {
          this.list = res.data.list;
          console.log(this.list);
        }
      });
    }
  },
  mounted() {
    this.getData();
  }
};
</script>
<style scoped lang='less'>
.home {
  width: 100%;
  height: 100%;
  background-color: #efeef3;
  font-size: 16px;
}
.iconfont {
  font-size: 24px;
}
.searchBar {
  width: 86%;
  margin: auto;
  padding-top: 25px;
  overflow: hidden;
  position: relative;
}
.searchBar i {
  position: absolute;
  font-size: 18px;
  color: #7a7a7a;
}
.searchBar i:first-child {
  left: 10px;
  bottom: 6px;
}
.searchBar i:last-child {
  right: 0.8rem;
  bottom: 5px;
}
.searchBar input {
  background-color: #fff;
  height: 26px;
  width: 66%;
  padding-left: 0.35rem;
  border-radius: 4px;
  margin-right: 10px;
  color: #999;
}
.mint-navbar {
  width: 70%;
  height: 28px;
  line-height: 28px;
  margin: 20px auto;
  border-radius: 4px;
  border: 1px solid #47adff;
  font-size: 16px;
}
.mint-navbar a {
  border-right: 1px solid #47adff;
}
.toggleClass {
  background-color: #47adff;
  color: #fff !important;
}
.mint-navbar .mint-tab-item {
  padding: 7px;
}
.thead {
  margin: 4px auto;
  overflow: hidden;
  padding: 8px 0;
  background: #fff;
  display: flex;
  align-items: center;
  li {
    float: left;
    width: 20%;
    text-align: center;
  }
}

.status01 {
  color: #e51c23;
}

.status02 {
  color: #09f;
}
.mint-cell {
  margin-bottom: 10px;
}
</style>
